<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>选项卡</title>
  <style type="text/css">
    *{
      margin: 0 auto;
      padding: 0;
    }
    ul{
      list-style: none;
    }
    .tab{
      width: 400px;
      height: 400px;
      border: 2px solid palevioletred;
    }
    .tab ul{
      display: flex;
      justify-content: space-around;
    }
    .tab ul li.active{
      border-bottom: 4px solid mediumvioletred;
    }
    .tab ul li:hover{
      cursor: pointer;
    }
  </style>
</head>
<style type="text/css">
    #app input{
        text-align: right;
    }
</style>
<body>
  <div id="app">
    <div class="tab">
      <ul>
        <li v-for="(item, i) in tabList" :key="item.id" :class="{active:i===currentIndex}" @click="handleClick(i)">
          <span>{{item.title}}</span>
        </li>
      </ul>
      <div class="content" v-if="currentIndex === 0">要闻</div>
      <div class="content" v-else-if="currentIndex === 1">推荐</div>
      <div class="content" v-else>原创</div>
    </div>
  </div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data() {
      return {
        currentIndex: 0,
        tabList: [
          {
            id: 1,
            title: '要闻'
          },
          {
            id: 2,
            title: '推荐'
          },
          {
            id: 3,
            title: '原创'
          },
        ]
      }
    },
    methods: {
      handleClick(i) {
        this.currentIndex = i;
      }
    }
  })
</script>
</body>
</html>